/**
 * Created with JetBrains WebStorm.
 * User: bu0i
 * Date: 10/25/13
 * Time: 10:08 AM
 * To change this template use File | Settings | File Templates.
 */
$(document).ready(function(){

    // Kích thước gốc của hình
    var native_width = 0;
    var native_height = 0;

    $(".magnify").mousemove(function(e){
        if(!native_width && !native_height)
        {
            // Chỉ 1 lần duy nhất
            var image_object = new Image();
            image_object.src = $(".small").attr("src");

            native_width = image_object.width;
            native_height = image_object.height;
            //console.log(native_width, native_height);
        }
        else
        {
			// Tính toàn vị trí chuột
            //Lấy vị trí của magnify
            var magnify_offset = $(this).offset();

            // Lấy vị trí của chuột trong .magnify
            var mx = e.pageX - magnify_offset.left;
            var my = e.pageY - magnify_offset.top;


            // Nếu chuột nằm trong magnify thì hiện .large
            if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
            {
                $(".large").fadeIn(100);
            }
            else
            {
                $(".large").fadeOut(100);
            }

            if($(".large").is(":visible"))
            {
                //Tính toán vị trí của hình background lớn
                var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
                var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;

                var bgp = rx + "px " + ry + "px";

                //Tính toán lại vị trí .large sao cho nó ở giữa chuột
                var px = mx - $(".large").width()/2;
                var py = my - $(".large").height()/2;

                //If you hover on the image now, you should see the magnifying glass in action
                $(".large").css({left: px, top: py, backgroundPosition: bgp});
            }
        }
    })
})